<template>
    <jb-crud-page
        ref="templatePage"
        search-url="/api/admin/hiprint/tpl/datas"
        :search-conditions="pageConditions"
        :reset-btn-shown="false"
        :edit-component="TemaplateEdit"
    >
        <template #conditions-form>
            <jb-input
                v-model:value="pageConditions.keywords"
                placeholder="输入关键字搜索"
                @keyup.enter="templatePage?.loadData(true)"
            />
        </template>
        <template #default="{ list, tableStartIndex }">
            <jb-table
                ref="tableRef"
                :start-index="tableStartIndex"
                :data="list"
            >
<!--                <jb-column type="checkbox" width="60" fixed="left"></jb-column>-->
                <jb-column type="seq" title="序号" width="60" fixed="left"></jb-column>
                <jb-column
                    field="name"
                    title="模板名称"
                    min-width="140"
                    fixed="left"
                ></jb-column>
                <jb-column field="sn" title="模板编码（SN）" min-width="140"></jb-column>
                <jb-column field="remark" title="备注" min-width="140"></jb-column>
                <jb-column field="createTime" title="创建时间" min-width="160">
                </jb-column>
                <jb-column field="updateTime" title="更新时间" min-width="160" sortable></jb-column>

                <jb-column title="操作" width="130" fixed="right">
                    <template #default="{ row }">
                        <jb-btn
                            tip-text="加载此模板到设计器"
                            icon="lets-icons:img-load-box-duotone-line"
                            secondary
                            type="success"
                            circle
                            @click="handleLoadTemplate(row)"
                        ></jb-btn>
                        <jb-btn
                            class="ml-8px mr-8px"
                            tip-text="编辑"
                            :icon="Icons.EDIT"
                            type="warning"
                            secondary
                            circle
                            @click="
                                templatePage?.showEditModal('编辑基本信息', {
                                    id: row.id,
                                    name: row.name,
                                    sn: row.sn,
                                    remark: row.remark,
                                })
                            "
                        ></jb-btn>
                        <jb-btn
                            tip-text="删除"
                            :icon="Icons.DELETE"
                            secondary
                            type="error"
                            circle
                            confirm-text="确定删除这条数据？"
                            :url="`/api/admin/hiprint/tpl/delete/${row.id}`"
                            @success="templatePage?.loadData()"
                        ></jb-btn>
                    </template>
                </jb-column>
            </jb-table>
        </template>
    </jb-crud-page>
</template>

<script setup lang="ts">
import {inject, ref} from 'vue'
import { Icons } from '@/constants'
import { useResetableData } from '@/hooks/common/use-resetable-data'
import JbCrudPage from '@/components/_builtin/jb-crud-page/index.vue'
import TemaplateEdit from './components/edit/index.vue'
import type { VxeTableInstance } from 'vxe-table'
import {JBoltApi} from "@/utils";
import {storeToRefs} from "pinia";
import {usePrintStore} from "@/store/modules/print";
import {hiprint} from "vue-plugin-hiprint";

const templatePage = ref<InstanceType<typeof JbCrudPage> | null>(null)
const pageConditions = useResetableData({
    keywords: '',
})

const { hiprintTemplate,info } = storeToRefs(usePrintStore())

const tableRef = ref<VxeTableInstance>()

const closeDrawer = inject('closeDrawer') as any

function handleLoadTemplate(row: any) {
    JBoltApi.post(`/api/admin/hiprint/tpl/load/${row.id}`).then(({result}) => {
        info.value =row
        if(row.testJsonData){
            info.value.testJsonData = JSON.parse(row.testJsonData)
        }
        $('#hiprint-printTemplate').empty()
        hiprintTemplate.value = new hiprint.PrintTemplate({
            template: JSON.parse(result.data.content),
            settingContainer: '#PrintElementOptionSetting',
            paginationContainer: '.hiprint-printPagination',
            defaultPanelName: '默认面板名称',
            onPanelAddClick: (panel:any, createPanel:any) => {
                panel.name = '新面板' + (panel.index + 1);
                createPanel(panel);
            },
        });
        hiprintTemplate.value.design('#hiprint-printTemplate', {grid: true});
        closeDrawer()
    })
}

</script>

<style scoped></style>
